<template>
    <view class="flex-v-center item " :class="icon" @click="pageClick">
        <image class="icon" v-if="icon" :src="`../../../../static/tabBar/mine/` + icon + `.png`" mode="scaleToFill"></image>
        <view class="page-name">{{ pageName }}</view>
    </view>
</template>
<script>
export default {
    name: 'PageItem',
    data() {
        return {};
    },
    props: {
        icon: {
            type: String,
            default: ''
        },
        pageName: {
            type: String,
            default: ''
        }
    },
    computed: {},
    onLoad() {},
    onShow() {},
    methods: {
        pageClick() {
            this.$emit('pageClick');
        }
    },
    watch: {},
    components: {}
};
</script>
<style lang="scss" scoped>
.item {
    width: 336rpx;
    height: 141rpx;
    border-radius: 10rpx;
    position: relative;
    .icon {
        position: absolute;
        left: 0;
        top: 0;
    }
    .page-name {
        color: #ffffff;
        padding-left: 168rpx;
        font-size: 34rpx;
        line-height: 34rpx;
        font-weight: bold;
    }
}
.h5 {
    .icon {
        width: 118rpx;
        height: 120rpx;
    }
    background-image: linear-gradient(45deg, #ffac1a 0%, #ff9f3c 100%);
    box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(255, 166, 42, 0.5);
}
.vlog {
    .icon {
        width: 131rpx;
        height: 120rpx;
    }
    background-image: linear-gradient(45deg, #7a82ff 0%, #7c7bff 100%);
    box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(122, 129, 255, 0.5);
}
</style>
